<template>
  <div class="orderSetting">
    <div class="set-head"><h3>订单设置</h3></div>
    <div class="set-title">订单基础设置</div>
    <div class="set-form">
      <el-form v-model="form" class="ele-form">
        <el-form-item label="" class="ele-form-item">
          <el-col :span="4">库存扣减方式</el-col>
          <el-radio-group v-model="form.stockDeduct" class="ele-col-radio">
            <el-col :span="6">
              <el-radio label="0" class="ele-radio-1">拍下减库存</el-radio>
              <el-radio label="1" class="ele-radio-2">付款减库存</el-radio>
            </el-col>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" class="ele-form-item">
          <el-col :span="4">
            <span> 库存预占用时间:</span>
          </el-col>
          <el-col :span="2">
            <span> 用户拍下后</span>
          </el-col>
          <el-col :span="5">
            <el-input-number
              v-model="form.stockPreemption"
              placeholder="输入时长"
              :precision="0"
              :controls="false"
              :min="0"
              :max="60"
              style="width:200px"
            />&nbsp; 分钟
          </el-col>
          <el-col :span="5">
            内未付款，取消占用库存
          </el-col>
        </el-form-item>

        <el-form-item class="ele-form-item">
          <el-col :span="4">
            <span> 待付款取消订单时间:</span>
          </el-col>
          <el-col :span="2">
            <span> 用户拍下</span>
          </el-col>
          <el-col :span="5">
            <el-input-number
              v-model="form.cancleOrder"
              placeholder="输入时长"
              :precision="0"
              :controls="false"
              :min="0"
              :max="60"
              style="width:200px"
            />&nbsp; 分钟
          </el-col>
          <el-col :span="5">
            未付款，自动取消订单
          </el-col>
        </el-form-item>

        <el-form-item class="ele-form-item">
          <el-col :span="4">
            <span> 发货自动确认收货时间:</span>
          </el-col>
          <el-col :span="2">
            <span> 商家发货</span>
          </el-col>
          <el-col :span="5">
            <el-input-number
              v-model="form.confirmTake"
              :precision="0"
              :controls="false"
              :min="0"
              :max="10"
              placeholder="输入时长"
              style="width:200px"
            />&nbsp; 天后
          </el-col>
          <el-col :span="5">
            用户未收货时，自动收货
          </el-col>
        </el-form-item>

        <el-form-item label="" class="">
          <el-col :span="4">
            <span> 退换货自动确认收货时间:</span>
          </el-col>
          <el-col :span="2">
            <span> 用户发货</span>
          </el-col>
          <el-col :span="5">
            <el-input-number
              v-model="form.backComfirmTake"
              placeholder="输入时长"
              :precision="0"
              :controls="false"
              :min="0"
              :max="10"
              style="width:200px"
            />&nbsp; 天后
          </el-col>
          <el-col :span="5">
            商家未确认收货时，自动收货
          </el-col>
        </el-form-item>

        <el-form-item label="" class="">
          <el-col :span="4">
            <span>归还设备自动确认收货时间:</span>
          </el-col>
          <el-col :span="2">
            <span>用户发货</span>
          </el-col>
          <el-col :span="5">
            <el-input-number
              v-model="form.returnEquipment"
              placeholder="输入时长"
              style="width:200px"
              :precision="0"
              :controls="false"
              :min="0"
              :max="10"
            />&nbsp; 天后
          </el-col>
          <el-col :span="5">
            商家未确认收货时，自动收货
          </el-col>
        </el-form-item>

        <el-form-item label="" class="">
          <el-col :span="4">
            <span> 售后自动退款:</span>
          </el-col>
          <el-col :span="2">
            <span> 用户申请退款</span>
          </el-col>
          <el-col :span="5">
            <el-input-number
              v-model="form.afterSaleRefund"
              placeholder="输入时长"
              :precision="0"
              :controls="false"
              :min="0"
              :max="10"
              style="width:200px"
            />&nbsp; 天后
            <el-col :span="24" class="ele-span">
              <span>仅限于用户未收货权申请退款时生效</span>
            </el-col>
          </el-col>
          <el-col :span="5">
            商家未处理时，自动退款
          </el-col>
        </el-form-item>
        <el-form-item label="" class="">
          <el-col :span="4">
            <span> 自提时间限制:</span>
          </el-col>
          <el-col :span="2">
            <span>售卖订单 用户下单成功</span>
          </el-col>
          <el-col :span="5">
            <el-input-number
              v-model="form.sinceLiftSale"
              placeholder="输入时长"
              :precision="0"
              :controls="false"
              :min="0"
              :max="10"
              style="width:200px"
            />&nbsp; 小时后
          </el-col>
          <el-col :span="5">
            未完成自提,自动取消订单
          </el-col>
          <el-col :span="24">
            <el-col :span="4">
              <span> &nbsp;</span>
            </el-col>
            <el-col :span="2">
              <span>租赁订单 用户下单成功</span>
            </el-col>
            <el-col :span="5">
              <el-input-number
                v-model="form.sinceLiftLease"
                placeholder="输入时长"
                :precision="0"
                :controls="false"
                :min="0"
                :max="10"
                style="width:200px"
              />&nbsp; 小时后
              <el-col :span="24" class="ele-span">
                <span>租赁订单中包含配件商品时，跟随租赁商品处理，不单独作为售卖商品处理。</span>
              </el-col>
              <el-col :span="5">
                未完成自提,自动开始计费
              </el-col>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="" class="">
          <el-col :span="4">
            <span> 预约自提时间限制:</span>
          </el-col>
          <el-col :span="2">
            <span>售卖订单 用户预约时间结束</span>
          </el-col>
          <el-col :span="5">
            <el-input-number
              v-model="form.sinceLiftSaleReservation"
              placeholder="输入时长"
              :precision="0"
              :controls="false"
              :min="0"
              :max="10"
              style="width:200px"
            />&nbsp; 小时后
            <el-col :span="5">
              未完成自提,自动取消订单
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="4">
              <span> &nbsp;</span>
            </el-col>
            <el-col :span="2">
              <span>租赁订单 用户预约时间结束</span>
            </el-col>
            <el-col :span="5">
              <el-input-number
                v-model="form.sinceLiftLeaseReservation"
                placeholder="输入时长"
                :precision="0"
                :controls="false"
                :min="0"
                :max="10"
                style="width:200px"
              />&nbsp; 小时后
              <el-col :span="24" class="ele-span">
                <span>租赁订单中包含配件商品时，跟随租赁商品处理，不单独作为售卖商品处理。</span>
              </el-col>
              <el-col :span="5">
                未完成自提,自动开始计费
              </el-col>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="4">
            <span> &nbsp;</span>
          </el-col>
          <el-col :span="3">
            <el-button
              type="primary"
              class="ele-button"
              :loading="butloading"
              @click="submitFrom"
            >保存</el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getShopID } from '@/utils/auth'
import { orderSetting, getOrderSetting } from '@/api/order'

export default {
  name: 'OrderSetting',
  data() {
    return {
      butloading: false,
      form: {
        shopId: getShopID(),
        stockDeduct: '',
        stockPreemption: '',
        cancleOrder: '',
        confirmTake: '',
        backComfirmTake: '',
        returnEquipment: '',
        afterSaleRefund: '',
        sinceLiftSale: '',
        sinceLiftLease: '',
        sinceLiftSaleReservation: '',
        sinceLiftLeaseReservation: ''
      }
    }
  },
  mounted() {
    this.init()
  },
  activated() {
    this.init()
  },
  methods: {
    init() {
      getOrderSetting({ shopId: getShopID() }).then(response => {
        this.form.stockDeduct = response.data.data.stockReduceType.toString()
        this.form.stockPreemption = response.data.data.stockPreemption
        this.form.cancleOrder = response.data.data.cancleOrder
        this.form.confirmTake = response.data.data.confirmTake
        this.form.backComfirmTake = response.data.data.backComfirmTake
        this.form.returnEquipment = response.data.data.returnEquipment
        this.form.afterSaleRefund = response.data.data.afterSaleRefund
      })
    },
    radioChange(e) {
      console.log(e)
    },
    submitFrom() {
      this.butloading = true
      orderSetting(this.form)
        .then(response => {
          this.butloading = false
          this.$message.success('成功')
        })
        .catch(() => {
          this.butloading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.orderSetting {
  padding: 20px;
  .set-head {
    padding-left: 10px;
  }
  .set-title {
    width: 100%;
    background: #f3f3f3;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    padding-left: 20px;
    font-size: 14px;
  }
  .set-form {
    .ele-form {
      padding-left: 20px;
      .ele-form-item {
        padding-top: 40px;
        .ele-col-radio {
          padding-top: 13px;
          // .ele-radio-1{

          // }
          .ele-radio-2 {
            margin-top: 40px;
          }
        }
      }
    }

    .ele-span {
      font-size: 13px;
      color: gray;
      margin-top: 10px;
    }
    .ele-button {
      width: 100%;
      margin-top: 20px;
    }
  }
}
</style>
